<template>
  <div p-30px>
    <h2>角色管理</h2>

    <!-- 角色 1. 按钮 -->
    <el-button @click="hanleAddRole">角色添加</el-button>

    <!-- 表格 1. 实现表格 -->
    <el-table :data="roles" style="width: 100%">
      <el-table-column prop="id" label="角色id" width="180" />
      <el-table-column prop="name" label="角色名称" width="180" />
      <el-table-column prop="description" label="描述" />
      <el-table-column
        prop="is_default"
        label=" 默认角色"
        :formatter="formatter"
      />
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <!-- 菜单权限 1. 增加按钮-->
          <el-button link @click="handleRoleMenu(scope.row)"
            >菜单权限</el-button
          >
          <el-button link @click="handleEditRole(scope.row)">编辑</el-button>
          <el-button link @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格 2. 实现 分页 -->
    <el-pagination
      :page-sizes="[1, 5, 10, 20]"
      layout="prev, pager, next, sizes, total"
      :total="count"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 抽屉组件 -->
    <right-panel v-model="visible" :title="panelTitle">
      <!-- 表单组件 -->
      <editor-role
        :type="editType"
        :data="editData"
        @submit="handleSubmit"
      ></editor-role>
    </right-panel>
    <!-- 菜单权限 2. 增加权限弹窗 -->
    <role-menu
      :role="roleData"
      v-model="roleMenuVisible"
      v-if="roleMenuVisible && roleData"
    />
  </div>
</template>
<script lang="ts" setup>
import { IRole } from "@/api/role"
// 表格 3. 导入 useRoleStore
import { useRoleStore } from "@/stores/role"
import EditorRole from "./components/editor-role.vue"
import { useRoleHelpers } from "./roleHelpers"
// 表格 4. 使用 useRoleStore
const store = useRoleStore()
const pageNum = ref(0)
const pageSize = ref(10)
const {
  handleSubmit, // 弹窗 6. 角色组件提交事件
  handleRemove, // 弹窗 7. 角色组件删除事件
  handleEditRole, // 弹窗 5. 角色组件修改事件
  hanleAddRole, // 弹窗 4. 角色组件添加事件
  panelTitle, // 弹窗 1. 角色组件标题, 添加 还是修改
  editType, // 弹窗 2. 角色组件类型, 添加 还是修改
  visible, // 角色 2. 弹窗控制
  editData // 弹窗 3. 角色组件 添加 修改 的 数据
} = useRoleHelpers({ pageNum, pageSize })
// 表格 5. 使用 toRefs 解构 useRoleStore 获取响应式数据 count roles
const { count, roles } = toRefs(store.state)
// 表格 6. 页面加载 监听 pageNum.value 和  pageSize.value， 请求 角色列表
watchEffect(() => {
  store.getRoles({ pageNum: pageNum.value, pageSize: pageSize.value })
})
// 表格 7. 每页条目个数， 请求 角色列表

const handleSizeChange = (val: number) => {
  pageSize.value = val
}
// 表格 8. 页数变化， 请求 角色列表
const handleCurrentChange = (val: number) => {
  pageNum.value = val - 1
}
// 表格 9. 数据返显格式化
const formatter = (row: IRole) => {
  return row.is_default ? "是" : "否"
}
// 菜单权限 3. 菜单权限要编辑的角色
const roleData = ref<IRole | null>(null)
// 菜单权限 4. 菜单权限弹窗，控制变量
const roleMenuVisible = ref(false)
// 菜单权限 5. 增加按钮事件函数
const handleRoleMenu = (row: IRole) => {
  // 菜单权限 5-1. 展示弹窗
  roleMenuVisible.value = true
  // 菜单权限 5-2. 传入 编辑数据
  roleData.value = row
}
</script>
